// 获取UI元素
const video = document.getElementById('video');
const playBtn = document.getElementById('play-btn');
const pauseBtn = document.getElementById('pause-btn');
const stopBtn = document.getElementById('stop-btn');
const progress = document.getElementById('progress');
const timestamp = document.getElementById('timestamp');

// 播放视频
function playVideo() {
    video.play();
    updatePlayPauseButtons();
}

// 暂停视频
function pauseVideo() {
    video.pause();
    updatePlayPauseButtons();
}

// 停止视频
function stopVideo() {
    video.currentTime = 0;
    video.pause();
    updatePlayPauseButtons();
}

// 更新播放/暂停按钮状态
function updatePlayPauseButtons() {
    if(video.paused) {
        playBtn.style.display = 'block';
        pauseBtn.style.display = 'none';
    } else {
        playBtn.style.display = 'none';
        pauseBtn.style.display = 'block';
    }
}

// 更新进度条
function updateProgress() {
    progress.value = (video.currentTime / video.duration) * 100;
    
    // 更新时间显示
    let mins = Math.floor(video.currentTime / 60);
    if(mins < 10) {
        mins = '0' + String(mins);
    }
    
    let secs = Math.floor(video.currentTime % 60);
    if(secs < 10) {
        secs = '0' + String(secs);
    }
    
    timestamp.textContent = `${mins}:${secs}`;
}

// 设置视频进度
function setVideoProgress() {
    video.currentTime = (+progress.value * video.duration) / 100;
}

// 事件监听
video.addEventListener('click', pauseVideo);
video.addEventListener('pause', updatePlayPauseButtons);
video.addEventListener('play', updatePlayPauseButtons);
video.addEventListener('timeupdate', updateProgress);

playBtn.addEventListener('click', playVideo);
pauseBtn.addEventListener('click', pauseVideo);
stopBtn.addEventListener('click', stopVideo);
progress.addEventListener('change', setVideoProgress);

// 初始化按钮状态
updatePlayPauseButtons();